@charset "UTF-8";
//-----------------------------------------------------
// mixin scss
// 包括常用的mixin，%及@function
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
// @function，返回一个值，用于调用
//-----------------------------------------------------

// mixin & %
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
//-----------------------------------------------------

// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block($extend:true) {
  display: inline-block;
  @if $lte7 {
    *display: inline;
    *zoom: 1;
  }
}

// Center-align a block level element
// block得有宽度margin左右为auto才能居中
@mixin center-block($extend:true) {
  @if $extend {
    @extend %center-block;
  } @else {
    margin-left: auto;
    margin-right: auto;
  }
}

%center-block {
  @include center-block(false);
}

// float left & right
@mixin float($float:left) {
  float: $float;
  @if $lte7 {
    display: inline;
  }
}

%float {
  @include float;
}

// clearfix
// 闭合子元素的浮动
@mixin clearfix($extend:true) {
  @extend %clearfix;
  @if $lte7 {
    *zoom: 1;
  }
}

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Hide from both screenreaders and browsers: h5bp.com/u
// 既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden($extend:true) {
  @if $extend {
    @extend %hidden;
  } @else {
    display: none !important;
    visibility: hidden;
  }
}

%hidden {
  @include hidden(false);
}

// Hide only visually, but have it available for screenreaders
// 只隐藏于视觉，屏幕浏览器可以阅读
@mixin visually-hidden($extend:true) {
  @if $extend {
    @extend %visually-hidden;
  } @else {
    position: absolute;
    @if $lte7 {
      clip: rect(1px 1px 1px 1px); //ie6/7
    }
    clip: rect(1px, 1px, 1px, 1px); //standard
  }
}

%visually-hidden {
  @include visually-hidden(false);
}

// 图片替换文字
// 高级浏览器直接2就可以
// 原生7,8不支持color的transparent，所以采用1;
// ie6用1会有一条细线，所以采用3
// 如果要兼容ie6，使用的时候请确定元素设置高度。
@mixin ir($height:99) {
  font: 0/0 a; //1
  text-shadow: none;
  border: 0 none;
  color: transparent; //2
  @if $lte7 {
    _overflow: hidden; //3
    _font-size: 10px; //3
    _line-height: $height; //3
  }
}

%ir {
  @include ir;
}

// Text overflow
// 元素可以设置宽度才可应用省略号
%ellipsis-basic {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin ellipsis($width:100%) {
  @extend %ellipsis-basic;
  width: $width;
}

// Opacity
// lte8使用filter兼容
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter {
    filter: alpha(opacity=$opacity);
  }
}

%opacity {
  @include opacity;
}

// triangle
%triangle-basic {
  content: "";
  height: 0;
  width: 0;
  overflow: hidden;
  border-style: solid;
}

@mixin triangle($d:top,$color:#ddd,$xsize:10px,$ysize:10px ) {
  @extend %triangle-basic;
  border-width: $xsize $ysize;
  border-color: transparent;
  border-#{$d}-color: $color;
}

//黑色背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)) {
  color: #fff;
  @if $filter {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  } @else {
    background-color: #333;
  }
  background-color: $bgcolor;
}

%bgcolor-alpha {
  @include bgcolor-alpha;
}

// disabled
// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab) {
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

%disabled {
  @include disabled;
}

// 水平间隔线，适用于行列表
@mixin horizontal-line($border:1px dashed $gray, $padding:10px) {
  border-bottom: $border;
  padding-top: $padding;
  padding-bottom: $padding;
}

%horizontal-line {
  @include horizontal-line;
}

// mixin
// 只定义了mixin，所以只能通过@include来调用
//-----------------------------------------------------

// rem
// thanks:http://drublic.de/blog/rem-fallback-sass-less/;
// @include rem(width,20)   ->   width: 280px; width: 20rem;
@mixin rem($property, $px) {
  #{$property}: $px * $baseFontSize;
  #{$property}: #{$px}rem;
}

// @include rem-font-size(2)  ->  font-size: 28px; font-size: 2rem;
@mixin rem-font-size($px) {
  font-size: $px * $baseFontSize;
  font-size: #{$px}rem;
}

//最小高度
@mixin min-height($height) {
  min-height: $height;
  height: auto !important;
  @if $lte7 {
    _height: $height;
  }
}

//垂直居中
@mixin align-center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) #{0 0} -($height / 2);
  } @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
  }
}

%align-abs-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

%align-table-center {
  display: table;
  .table-cell {
    display: table-cell;
    vertical-align: middle;
  }
  .center-block {
    width: 50%;
    margin: 0 auto;
  }
}

%align-inline-center {
  overflow: hidden;
  .center-block {
    display: inline-block;
  }
  &:after {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    content: "";
  }
}

// Retina images.
// @include image-2x("../images/img-2x.png", 200px, 200px);
// Use with care - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($url, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    // on retina, use image that's scaled by 2
    background-image: url('#{$url}');
    background-size: $width $height;
  }
}

%zoom {
  @if $lte7 {
    *zoom: 1;
  }
}

//function
//-----------------------------------------------------

// px转em
@function pxToEm($px, $base: 16) {
  @return ($px / $base) * 1em;
}

// 为颜色添加白色，以百分比形式
@function tint($color, $percent) {
  @return mix(white, $color, $percent);
}

// 为颜色添加黑色，以百分比形式
@function shade($color, $percent) {
  @return mix(black, $color, $percent);
}

// 定义一些常见元素的简单样式(btn,table,form)
// 这里只是满足简单的使用，更全更好的请参考各自的组件
//-----------------------------------------------------

// btn
// @include simple-btn;
// @include simple-btn(true);
// @include simple-btn($bgColor:$green);
@mixin simple-btn($formbtn:false, $bgColor: $primary, $textColor:$white) {
  @include inline-block;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  padding: 0 15px;
  @if $formbtn {
    height: 28px;
  } @else {
    line-height: 28px;
  }
  color: $textColor;
  background-color: $bgColor;
  border: 0 none;

  &:hover {
    color: $textColor;
    background-color: darken($bgColor, 5%);
  }
}


// table
// @include simple-table;
// @include simple-table(false);
// @include simple-table(true, $thBgColor: $orange);
@mixin simple-table($th:true, $borderColor: $gray, $thBgColor: $primary, $thTextColor:$white){
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: $baseGap;

    & th,
    & td{
        border:1px solid $borderColor;
    }

    th,td{
        padding: 8px;
        text-align: left;
    }
    // 如果
    @if $th{
        th{
            color: $thTextColor;
            background-color: $thBgColor;
            border-color:$thBgColor;
            border-bottom:0 none;
        }
    }
}

@mixin hover($n,$val1,$val2) {
  transition: $n 0.3s ease-out;
  &:hover {
    #{$n}: $val1;
  }
  &:active {
    #{$n}: $val2;
  }
}
//hover and active
//$data-hover: ($n1,$hover,$active)($n2,$hover,$active)($n3,$hover,$active);
// @include hovers((background,#444,#eee)(color,#000,#fff));
@mixin hovers($data) {
  $ease: .3s ease-out;
  $return: nth(nth($data,1),1) $ease;
  @for $i from 2 through length($data) {
    $return: join(#{$return}, #{nth(nth($data,$i),1) $ease}, 'comma');
  }
  transition: $return;
  &:hover {
    @each $prop, $hover, $active in $data {
      #{$prop}: $hover;
    }
  }
  &:active {
    @each $prop, $hover, $active in $data {
      #{$prop}: $active;
    }
  }
}

// Gradients
@mixin linear-gradient($start, $end, $to:bottom) {
  background-color: $start; // Old browsers
  background-image: linear-gradient(to $to, $start 0%, $end 100%);     // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}', GradientType=0 ); // IE6-9
}
@mixin directional-gradient($start, $end, $deg: 45deg) {
  background-color: $start; // Old browsers
  background-image: linear-gradient($deg, $start 0%, $end 100%);     // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1 ); // IE6-9
}

@mixin bgurl($url,$secDir:'common',$repeat:no-repeat) {
  background: url('./assets/images/#{$secDir}/#{$url}') $repeat;
}